import React from 'react'
import "./index.less"
// vant 组件
import { Popover } from 'react-vant';

export default function Header(props) {
    // PopoverRef
    const popover = React.useRef()
    // 发送群聊事件
    const sendGroupChat = () => {
        console.log('发送群聊');
        popover.current.hide();//关闭popover
    }
    // 添加朋友事件
    const addFriend = () => {
        console.log('添加朋友');
        popover.current.hide();//关闭popover
    }
    // 扫一扫
    const scan = () => {
        console.log('扫一扫');
        popover.current.hide();//关闭popover
    }
    return (
        <div className='top topStyle2'>
            {
                props.icon1 ? <p>
                    <span>
                        <svg className='icon search' aria-hidden='true'>
                            <use xlinkHref={props.icon1}></use>
                        </svg>
                    </span>
                </p> : null
            }
            <p className='header_title'>
                <span>{props.title}</span>
            </p>
            <p className='header_icon'>
                {
                    props.icon2 ? <span>
                        <svg className='icon search' aria-hidden='true'>
                            <use xlinkHref={props.icon2}></use>
                        </svg>
                    </span> : null
                }
                {/* 点击加号出现弹出层 */}
                <Popover
                    ref={popover}
                    theme="dark"
                    placement='bottom-end'
                    offset={[5, 8]}
                    style={{width:'100px'}}
                    reference={props.icon3 ? <span>
                        <svg className='icon jia' aria-hidden='true'>
                            <use xlinkHref={props.icon3}></use>
                        </svg>
                    </span> : null}
                >
                    <ul>
                        <li onClick={sendGroupChat}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-xiaoxi2"></use>
                            </svg>
                            <p>发起群聊</p>
                        </li>
                        <li onClick={addFriend}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-tianjiapengyou"></use>
                            </svg>
                            <p>添加朋友</p>
                        </li>
                        <li onClick={scan}>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-saoyisao"></use>
                            </svg>
                            <p>扫一扫</p>
                        </li>
                        <li>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-icon-test1"></use>
                            </svg>
                            <p>收付款</p>
                        </li>
                        <li>
                            <svg className='icon' aria-hidden='true'>
                                <use xlinkHref="#icon-xiaoxi_xuanzhong"></use>
                            </svg>
                            <p>帮助与反馈</p>
                        </li>
                    </ul>
                </Popover>
            </p>
            
        </div>
    )
}
